<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
    <main class="container mx-auto py-8 px-4">
      <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          <!-- 左侧信息区域 -->
          <div class="lg:col-span-4 space-y-6">
            <!-- 顶部横幅卡片 -->
            <div class="bg-white rounded-2xl shadow-lg p-6">
              <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full mb-4">
                  <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
                  </svg>
                </div>
                <h1 class="text-2xl font-bold text-gray-900 mb-2">社区公告</h1>
                <p class="text-gray-600">及时了解校园最新动态，掌握重要通知信息</p>
              </div>
            </div>

            <!-- 统计信息卡片 -->
            <div class="bg-white rounded-2xl shadow-lg p-6">
              <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                统计信息
              </h3>
              <div class="space-y-4">
                <div class="flex items-center justify-between p-3 bg-blue-50 rounded-xl">
                  <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                      <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                      </svg>
                    </div>
                    <div>
                      <p class="text-sm text-gray-600">公告总数</p>
                      <p class="text-lg font-semibold text-gray-900">{{ notices.length }} 条</p>
                    </div>
                  </div>
                </div>
                
                <div class="flex items-center justify-between p-3 bg-green-50 rounded-xl">
                  <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                      <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                    </div>
                    <div>
                      <p class="text-sm text-gray-600">最近更新</p>
                      <p class="text-lg font-semibold text-gray-900">{{ getLatestUpdateTime() }}</p>
                    </div>
                  </div>
                </div>

                <div class="flex items-center justify-between p-3 bg-purple-50 rounded-xl">
                  <div class="flex items-center">
                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                      <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                      </svg>
                    </div>
                    <div>
                      <p class="text-sm text-gray-600">总浏览量</p>
                      <p class="text-lg font-semibold text-gray-900">{{ getTotalViews() }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧公告列表区域 -->
          <div class="lg:col-span-8">
            
            <!-- 公告列表 -->
            <div class="space-y-6">
          <article
            v-for="notice in paginatedNotices"
            :key="notice.id"
            @click="handleNoticeClick(notice.id)"
            class="group bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer border border-gray-100 hover:border-indigo-200"
          >
            <!-- 公告头部 -->
            <div class="p-6 pb-4">
              <div class="flex items-start justify-between mb-1">
                <div class="flex-1">
                  <!-- 分类标签 -->
                  <div class="flex items-center mb-3">
                    <span v-if="isNew(notice.publishDate)" class="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                      🔥 新
                    </span>
                  </div>
                  
                  <!-- 标题 -->
                  <h2 class="text-xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors duration-200 mb-2 line-clamp-2">
                    {{ notice.title }}
                  </h2>
                </div>
                
                <!-- 重要程度指示器 -->
                <div v-if="notice.priority === 'high'" class="ml-1">
                  <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                </div>
              </div>
              
              <!-- 内容预览 -->
              <p class="text-gray-600 leading-relaxed line-clamp-2 mb-1">
                {{ notice.content }}
              </p>
            </div>

            <!-- 公告底部信息 -->
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
              <div class="flex items-center justify-between">
                <!-- 左侧信息 -->
                <div class="flex items-center space-x-6 text-sm text-gray-500">
                  <!-- 发布者 -->
                  <div class="flex items-center">
                    <img 
                      :src="notice.author.avatar" 
                      :alt="notice.author.name" 
                      class="w-6 h-6 rounded-full mr-2 border border-gray-200"
                    />
                    <span class="font-medium text-gray-700">{{ notice.author.name }}</span>
                  </div>
                  
                  <!-- 发布时间 -->
                  <div class="flex items-center">
                    <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>{{ formatPublishDate(notice.publishDate) }}</span>
                  </div>
                </div>
                
                <!-- 右侧统计 -->
                <div class="flex items-center space-x-4 text-sm text-gray-500">
                  <!-- 浏览量 -->
                  <div class="flex items-center">
                    <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    <span>{{ formatNumber(notice.views) }}</span>
                  </div>
                  
                  <!-- 查看详情箭头 -->
                  <div class="flex items-center text-indigo-500 group-hover:text-indigo-600">
                    <span class="mr-1">查看详情</span>
                    <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>

            <!-- 分页 -->
            <div v-if="notices.length > pageSize" class="mt-8">
              <div class="flex justify-center">
                <Pagination
                  :total="notices.length"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @page-changed="onPageChange"
                />
              </div>
              
              <!-- 分页信息 -->
              <div class="mt-4 text-center text-sm text-gray-500">
                显示第 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, notices.length) }} 条，
                共 {{ notices.length }} 条公告
              </div>
            </div>
          </div>

        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { notices } from "@/mock/noticeData";
import Pagination from "@/components/Pagination.vue";
import TopNav from "@/components/TopNav.vue";
import CategoryNav from "@/components/CategoryNav.vue";

export default {
  name: "Notice",
  components: {
    CategoryNav, TopNav,
    Pagination
  },
  data() {
    return {
      notices: notices.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate)),
      currentPage: 1,
      pageSize: 3
    };
  },
  computed: {
    paginatedNotices() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.notices.slice(start, end);
    }
  },
  methods: {
    formatPublishDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      
      if (diffDays === 1) {
        return '今天';
      } else if (diffDays === 2) {
        return '昨天';
      } else if (diffDays <= 7) {
        return `${diffDays - 1}天前`;
      } else {
        return date.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric'
        });
      }
    },
    
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + 'w';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k';
      }
      return num.toString();
    },
    
    getLatestUpdateTime() {
      if (this.notices.length === 0) return '暂无';
      const latest = this.notices.reduce((latest, notice) => {
        return new Date(notice.publishDate) > new Date(latest.publishDate) ? notice : latest;
      });
      return this.formatPublishDate(latest.publishDate);
    },
    
    isNew(dateString) {
      const date = new Date(dateString);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      return diffDays <= 3; // 3天内的公告显示"新"标签
    },
    
    getCategoryClass(category) {
      const classes = {
        '学术': 'bg-blue-100 text-blue-800',
        '活动': 'bg-green-100 text-green-800',
        '管理': 'bg-yellow-100 text-yellow-800',
        '其他': 'bg-gray-100 text-gray-800'
      };
      return classes[category] || 'bg-gray-100 text-gray-800';
    },
    
    handleNoticeClick(noticeId) {
      console.log('查看公告详情:', noticeId);
      // 这里可以跳转到公告详情页
      // this.$router.push({ name: 'NoticeDetail', params: { id: noticeId } });
    },
    
    onPageChange(page) {
      this.currentPage = page;
      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },

    getTotalViews() {
      const total = this.notices.reduce((sum, notice) => sum + notice.views, 0);
      return this.formatNumber(total);
    },

  }
};
</script>

<style scoped>
/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡片悬停效果 */
article:hover {
  transform: translateY(-2px);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

</style>